<template>
  <view class="page-module__nav">
    <swiper
      :indicator-dots="indicatorDots"
      :indicator-active-color="globPrimaryColor"
      class="page-module__nav-swiper"
    >
      <swiper-item v-for="(pages, i) in naviList" :key="i">
        <view :class="[`col-${datas.arrange}`]" class="page-module__nav-swiper-list">
          <view v-for="(item, j) in pages" :key="j" class="item" @click="onPage(item)">
            <view class="img">
              <edu-image :src="item.url" width="80" height="80"></edu-image>
              <!-- <u-image width="80" height="80" :src="item.url"></u-image> -->
            </view>
            <view class="title u-line-1">{{ item.title }}</view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    datas: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
    // 图文导航
    naviList() {
      const pages = []
      this.datas.list.forEach((item, index) => {
        const page = Math.floor(index / this.datas.arrange)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    },
    indicatorDots() {
      return this.datas.list.length > this.datas.arrange
    },
  },
  methods: {
    onPage(item) {
      let data = item.source_data
      if (this.$u.test.empty(data)) return
      if (item.source == 1) {
        if (data == 1) {
          this.$u.route({ type: 'tab', url: 'pages/exam/index' })
        } else if (data == 2) {
          this.$u.route('pageFound/teacher/list')
        } else if (data == 3) {
          this.$u.route('pageFound/topic/index')
        } else if (data == 4) {
          this.$u.route('pageFound/mall/list')
        } else if (data == 5) {
          this.$u.route('pageFound/circle/index')
        } else if (data == 6) {
          this.$u.route('pageFound/school/list')
        }
      } else if (item.source == 2) {
        this.$u.route('/pageCourse/course/list', {
          category: data,
        })
      } else if (item.source == 3) {
        // #ifdef H5
        window.open(data)
        // #endif
        // #ifdef APP-PLUS
        plus.runtime.openURL(data)
        // #endif
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.page-module__nav {
  margin-bottom: 32rpx;
  &-swiper {
    height: 160rpx;
    /* #ifdef MP */
    height: 190rpx;
    /* #endif */
    ::v-deep .uni-swiper-dots-horizontal {
      bottom: 0;
      height: 6rpx;
      background: #f7f7f7;
      border-radius: 6rpx;
    }
    ::v-deep .uni-swiper-dot {
      width: 40rpx;
      height: 6rpx;
      border-radius: 6rpx;
      margin-right: 0;
      background: transparent;
    }

    &-list {
      display: grid;
      &.col-2 {
        grid-template-columns: repeat(2, minmax(0px, 1fr));
      }
      &.col-3 {
        grid-template-columns: repeat(3, minmax(0px, 1fr));
      }
      &.col-4 {
        grid-template-columns: repeat(4, minmax(0px, 1fr));
      }
      &.col-5 {
        grid-template-columns: repeat(5, minmax(0px, 1fr));
      }

      .item {
        padding: 10rpx 6rpx 0;
        min-width: 0;
        text-align: center;
        .img {
          margin: 0 auto;
          width: 80rpx;
        }
        .title {
          margin-top: 8rpx;
          font-size: 22rpx;
          font-weight: 400;
          color: #333333;
          line-height: 32rpx;
        }
      }
    }
  }
}
</style>
